<template>
	<view :class="['tabPan flex', classNames, type]">
		<view :style="{lineHeight:height+'rpx'}" :class="['tabItem', { on: currentTabIndex == item.status }]"
			@click="tabChange(item.status)" v-for="(item, index) of list" :key="index">
			{{ item.name }}
		</view>
	</view>
</template>

<script>
	export default {
		name: "index",
		props: {
			type: {
				type: String,
				default: 'normal'
			},
			current: {
				type: [Number, String],
				default: 0
			},
			list: {
				type: Array,
				default: []
			},
			classNames: {
				type: String,
				default: ''
			},
			height: {
				type: [Number, String],
				default: 100
			},
		},
		data() {
			return {
				currentTabIndex: this.current
			}
		},
		created() {

		},
		methods: {
			tabChange(status) {
				if (this.currentTabIndex == status) return false
				this.currentTabIndex = status
				this.$emit('click', status)
			}
		}
	}
</script>

<style scoped lang='scss'>
	.tabPan {
		font-size: 0;
		background-color: #fff;

		&.round {
			border-radius: 60upx;

			.tabItem {
				color: #999;
				flex: 1;
				font-size: 28upx;
				text-align: center;

				&.on {
					background-color: $primary;
					color: #fff;
					border-radius: 60upx;
				}
			}
		}

		&.square {
			line-height: 80upx;
			border: 2upx solid $primary;
			box-sizing: border-box;
			border-radius: 10upx;
			overflow: hidden;

			.tabItem {
				color: $primary;
				flex: 1;
				font-size: 28upx;
				text-align: center;

				&.on {
					background-color: $primary;
					color: #fff;
				}
			}
		}

		&.normal {
			.tabItem {
				color: #999;
				flex: 1;
				font-size: 28upx;
				position: relative;
				text-align: center;

				&.on {
					color: $primary;

					&::after {
						content: '';
						position: absolute;
						left: 50%;
						margin-left: -30upx;
						bottom: 0upx;
						width: 60upx;
						height: 8upx;
						border-radius: 4upx;
						background-color: $primary;
					}
				}
			}
		}
	}
</style>
